<!-- PracticePage.vue -->
<template>
  <div class="practice-page-container">
    <div class="practice-header">
      <h1>数学练习</h1>
      <div class="practice-info">
        <span class="question-index">
          第 {{ currentQuestionIndex + 1 }} 题 / 共 {{ questions.length }} 题
        </span>
        <span class="timer">用时: {{ formattedTime }}</span>
      </div>
    </div>

    <div class="question-area">
      <div class="question-content">
        {{ currentQuestion.content }}
      </div>
      
      <!-- 单选题选项 -->
      <div class="options" v-if="currentQuestion.type === 'single_choice'">
        <el-radio-group v-model="userAnswer">
          <el-radio 
            v-for="(option, index) in currentQuestion.options" 
            :key="index" 
            :label="String.fromCharCode(65 + index)"
            class="option-item"
          >
            {{ String.fromCharCode(65 + index) }}. {{ option }}
          </el-radio>
        </el-radio-group>
      </div>
      
      <!-- 简答题输入框 -->
      <div class="short-answer" v-if="currentQuestion.type === 'short_answer'">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入您的答案"
          v-model="shortAnswer"
        ></el-input>
      </div>
    </div>

    <!-- 题目解析 -->
    <div class="explanation-area" v-if="showExplanation">
      <h3>题目解析</h3>
      <div>{{ currentQuestion.explanation || '暂无解析' }}</div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        @click="toggleExplanation" 
        v-if="currentQuestion.explanation"
      >
        {{ showExplanation ? '隐藏解析' : '查看解析' }}
      </el-button>
      
      <el-button 
        type="primary" 
        @click="submitAnswer"
        :disabled="!isAnswerValid"
      >
        {{ isLastQuestion ? '完成练习' : '提交答案' }}
      </el-button>
      
      <el-button-group>
        <el-button 
          @click="prevQuestion" 
          :disabled="currentQuestionIndex === 0"
        >
          上一题
        </el-button>
        <el-button 
          @click="nextQuestion" 
          :disabled="isLastQuestion"
        >
          下一题
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const props = defineProps({
  questions: {
    type: Array,
    default: () => []
  },
  practiceMode: {
    type: String,
    default: 'sequential'
  }
})

// 响应式数据
const currentQuestionIndex = ref(0)
const userAnswer = ref('')
const shortAnswer = ref('')
const showExplanation = ref(false)
const timeElapsed = ref(0)
const timer = ref(null)

// 计算属性
const currentQuestion = computed(() => {
  return props.questions[currentQuestionIndex.value]
})

const isLastQuestion = computed(() => {
  return currentQuestionIndex.value === props.questions.length - 1
})

const formattedTime = computed(() => {
  const minutes = Math.floor(timeElapsed.value / 60)
  const seconds = timeElapsed.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

const isAnswerValid = computed(() => {
  if (!currentQuestion.value) return false
  
  if (currentQuestion.value.type === 'single_choice') {
    return userAnswer.value !== ''
  } else if (currentQuestion.value.type === 'short_answer') {
    return shortAnswer.value.trim() !== ''
  }
  
  return false
})

// 生命周期钩子
onMounted(() => {
  if (props.questions.length === 0) {
    ElMessage.warning('没有获取到题目数据')
    router.back()
    return
  }
  
  startTimer()
})

onBeforeUnmount(() => {
  clearInterval(timer.value)
})

// 方法
const startTimer = () => {
  timer.value = setInterval(() => {
    timeElapsed.value++
  }, 1000)
}

const toggleExplanation = () => {
  showExplanation.value = !showExplanation.value
}

const submitAnswer = async () => {
  // 这里添加提交答案到后端的逻辑
  const isCorrect = checkAnswerCorrectness()
  
  if (isCorrect) {
    ElMessage.success('回答正确！')
  } else {
    ElMessage.error(`回答错误，正确答案是 ${currentQuestion.value.answer}`)
  }
  
  if (isLastQuestion.value) {
    ElMessage.success('练习完成！')
    router.push('/practice-result')
  } else {
    nextQuestion()
  }
}

const checkAnswerCorrectness = () => {
  if (currentQuestion.value.type === 'single_choice') {
    return userAnswer.value === currentQuestion.value.answer
  } else {
    // 简答题可能需要后端验证
    return false
  }
}

const prevQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
    resetAnswerFields()
  }
}

const nextQuestion = () => {
  if (!isLastQuestion.value) {
    currentQuestionIndex.value++
    resetAnswerFields()
  }
}

const resetAnswerFields = () => {
  userAnswer.value = ''
  shortAnswer.value = ''
  showExplanation.value = false
}
</script>

<style scoped>
.practice-page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.practice-header {
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.practice-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #666;
}

.question-area {
  flex: 1;
  margin-bottom: 30px;
}

.question-content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.options {
  margin: 30px 0;
}

.option-item {
  display: block;
  margin: 15px 0;
  font-size: 16px;
}

.short-answer {
  margin: 30px 0;
}

.explanation-area {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.explanation-area h3 {
  margin-bottom: 10px;
  color: #409EFF;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
</style>